<template>
    <div class="sebox">
        <el-col :span="12">
            <div class="sub-title">输入后匹配输入建议</div>
            <el-autocomplete
                    class="inline-input"
                    v-model="state2"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    @select="handleSelect"
                    style="width: 165px"
            ></el-autocomplete>
            <el-button  @click="searchMsg" type="primary" class="el-icon-search" ></el-button>
        </el-col>
    </div>
</template>
<script>
    import {request} from "../../network/request";

    export default {
        data() {

            return {
                restaurants: [],
                state2: ''
            };
        },
        methods: {
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            },
            searchMsg(){

                this.$router.push({
                    path:"/search",
                    query:{
                        keyWord:this.state2,
                    }
                });
            }
        },
        mounted() {

            request({
                url:"/getBlogAll",
                method: "post",
                params:{

                }
            }).then(res=>{
                for(let i = 0; i < res.data.length; i++){
                    let s = res.data[i].title;
                    let t = {"value": s};
                    this.restaurants.push(t);
                }
              //  console.log(this.restaurants)

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });

            request({
                url:"/getAllDiscuss",
                method: "post",
                params:{

                }
            }).then(res=>{
                for(let i = 0; i < res.data.length; i++){
                    let s = res.data[i].name;
                    let t = {"value": s};
                    this.restaurants.push(t);
                }
             //   console.log(this.restaurants)

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });
            request({
                url:"/getAllVideo",
                method: "post",
                params:{

                }
            }).then(res=>{
                for(let i = 0; i < res.data.length; i++){
                    let s = res.data[i].name;
                    let t = {"value": s};
                    this.restaurants.push(t);
                }
               // console.log(this.restaurants)

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });
        },

    };
</script>

<style scoped>
    .sebox{

        height: 100px;
        position: relative;
        top: -63px;
    }
    .el-icon-search{
       height: 40px;
        line-height: 0px;
        border-radius: 0px 5px 5px 0px;
        position: relative;
        top:2px;
    }
</style>